import React from 'react';
import {Row, Col, InputNumber} from 'antd';
import {inject, observer} from 'mobx-react';

@inject ('editorStore')
@observer
export default class Position extends React.Component {
  changePosition = (value, key) => {
    const {changeActive} = this.props.editorStore;
    changeActive (value, {
      name: 'style',
      key,
    });
  };
  render () {
    const {htmlBody} = this.props.editorStore;
    const currentIndex = htmlBody.findIndex (item => item.active);
    let currentHtmlBody = null;

    if (currentIndex > -1) {
      currentHtmlBody = htmlBody[currentIndex];
    }
    const {left, top, width, height,zIndex} = currentHtmlBody.style;
    return (
      <div className="page-editor-position">
        <Row>
          <Col span={5}>
            图层：
          </Col>
          <Col span={7}>
            的
          </Col>
          <Col span={5}>
            层级：
          </Col>
          <Col span={7}>
          <InputNumber
              value={zIndex}
              size="small"
              onChange={value => {
                this.changePosition (value, 'zIndex');
              }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={5}>
            x坐标：
          </Col>
          <Col span={7}>
            <InputNumber
              value={left}
              size="small"
              onChange={value => {
                this.changePosition (value, 'left');
              }}
            />
          </Col>
          <Col span={5}>
            y坐标：
          </Col>
          <Col span={7}>
            <InputNumber
              value={top}
              size="small"
              onChange={value => {
                this.changePosition (value, 'top');
              }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={5}>
            宽度：
          </Col>
          <Col span={7}>
            <InputNumber
              value={width}
              size="small"
              onChange={value => {
                this.changePosition (value, 'width');
              }}
            />
          </Col>
          <Col span={5}>
            高度：
          </Col>
          <Col span={7}>
            <InputNumber
              value={height}
              size="small"
              onChange={value => {
                this.changePosition (value, 'height');
              }}
            />
          </Col>
        </Row>
      </div>
    );
  }
}
